#@cmsLayout()

#define cmsContent()
<div class="cms-breadcrumb">
	<i class="layui-icon layui-icon-flag"></i>
	<span class="layui-breadcrumb">
	  	<a><cite>首页</cite></a>
	</span>
</div>

### 系统运行数据
<div class="layui-fluid padding">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">访问量</div>
	        	<div class="layui-card-body padding">
	          		<p class="layuiadmin-big-font">#(ret.indexAccess ?? 0)</p>
	        	</div>
	      	</div>
	    </div>
	    <div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">文章数</div>
	        	<div class="layui-card-body padding">
	          		<p class="layuiadmin-big-font">#(ret.countNums ?? 0)</p>
	        	</div>
	      	</div>
	    </div>
	    <div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">文章访问量</div>
	        	<div class="layui-card-body padding">
	          		<p class="layuiadmin-big-font">#(ret.artClickNums ?? 0)</p>
	        	</div>
	      	</div>
	    </div>
	    <div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">用户</div>
	        	<div class="layui-card-body padding">
	          		<p class="layuiadmin-big-font">#(ret.accountNums ?? 0)</p>
	        	</div>
	      	</div>
	    </div>
	</div>
</div>

### 访问数据折线图展示
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-sm12 layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">首页访问量趋势</div>
				<div class="layui-card-body padding">
					<div id="indexAccessTrend" style="width: 100%; height: 400px;"></div>
				</div>
			</div>
		</div>
		<div class="layui-col-sm12 layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">文章访问量趋势</div>
				<div class="layui-card-body padding">
					<div id="articleAccessTrend" style="width: 100%; height: 400px;"></div>
				</div>
			</div>
		</div>
	</div>
</div>

### 赞赏和交流
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">微信公众号</div>
	        	<div class="layui-card-body padding">
	          		<img alt="微信公众号：sitesCMS" src="#(ctx)/static/cms/img/WeChatOfficialAccount.jpg" width="100%">
	        	</div>
	      	</div>
	    </div>
	    <div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">QQ群</div>
	        	<div class="layui-card-body padding">
	          		<img alt="QQ群：1134290422" src="#(ctx)/static/cms/img/sitesCMS3.png" width="100%">
	        	</div>
	      	</div>
	    </div>
	    <div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">微信赞赏</div>
	        	<div class="layui-card-body padding">
	          		<img alt="微信赞赏" src="#(ctx)/static/cms/img/wxsk.jpg" width="100%">
	        	</div>
	      	</div>
	    </div>
	    <div class="layui-col-sm6 layui-col-md3">
	      	<div class="layui-card">
	        	<div class="layui-card-header">支付宝赞赏</div>
	        	<div class="layui-card-body padding">
	          		<img alt="支付宝赞赏" src="#(ctx)/static/cms/img/zfbsk2.jpg" width="100%">
	        	</div>
	      	</div>
	    </div>
	</div>
</div>

<div class="padding">
	<div class="layui-card">
		<div class="layui-card-header">系统信息</div>
		<div class="layui-card-body">
			<table class="layui-table">
  				<colgroup>
    				<col width="120">
    				<col>
  				</colgroup>
  				<tbody>
    				<tr>
      					<td>当前版本</td>
      					<td>#(SiteInfo.version??)</td>
    				</tr>
    				<tr>
      					<td>更新时间</td>
      					<td>#(SiteInfo.updateDate??)</td>
    				</tr>
    				<tr>
      					<td>技术选型</td>
      					<td>JFinal + jfinal-undertow + druid + Layui</td>
    				</tr>
  				</tbody>
			</table>
		</div>
	</div>
</div>

#@jsInit()
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	let indexChart = echarts.init(document.getElementById('indexAccessTrend'));//首页访问量趋势图
	let articleChart = echarts.init(document.getElementById('articleAccessTrend'));//文章访问量趋势图

	// 指定图表的配置项和数据
	let option = {
		title: {},//标题
		tooltip: {},//提示框
		legend: {},//图例
		xAxis: {//直角坐标系 grid 中的 x 轴
			data: [] //x轴的类目列表
		},
		yAxis: {},//直角坐标系 grid 中的 y 轴
		series: [
			{
				type: 'line',//使用折线图
				lineStyle: {color: "#009688"},//折线颜色
				itemStyle: {color: "#5FB878"},//折线拐点颜色
				data: []
			}
		]
	};

	// 请求首页访问数据
	$.post("/cmsLog/getAccessTrend", function (data){
		let days = new Array();
		let daysNum = new Array();
		let dataArray = data.daysNum;//后台返回的数据
		for(let i=0,j=dataArray.length; i<j; i++){
			days[i] = dataArray[i].days;
			daysNum[i] = dataArray[i].daysNum;
		}
		option.xAxis.data = days;
		option.series[0].data = daysNum;
		// 使用刚指定的配置项和数据显示图表。
		indexChart.setOption(option);
	});

	// 请求文章访问数据
	$.post("/cmsLog/getArtAccessTrend", function (data){
		let days = new Array();
		let daysNum = new Array();
		let dataArray = data.daysNum;//后台返回的数据
		for(let i=0,j=dataArray.length; i<j; i++){
			days[i] = dataArray[i].days;
			daysNum[i] = dataArray[i].daysNum;
		}
		option.xAxis.data = days;
		option.series[0].data = daysNum;
		// 使用刚指定的配置项和数据显示图表。
		articleChart.setOption(option);
	});

	// 响应容器的大小变化
	window.onresize = function() {
		indexChart.resize();
		articleChart.resize();
	};
</script>
#end